<template>
  <div class="PicDetail">
    <van-tabs>
      <van-tab v-for="item in classList" :key="item.id"
               :title="item.title">
        <PicShow :classId="item.id"></PicShow>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import PicShow from 'components/PicShow'

export default {
  name: 'index',
  data: () => ({
    classList: [],
    classId: 0
  }),
  created () {
    this.getClassList()
  },
  components: {
    PicShow
  },
  methods: {
    async getClassList () {
      const { message } = await this.$http.getClassList()
      this.classList = message
      // 添加一个全部的选项
      this.classList.unshift({
        id: 0,
        title: '全部'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .PicDetail {
    padding-top: 20px;

    /deep/ .van-tabs__nav--complete {
      padding: 0 0 15px 0;
    }
  }
</style>
